<template>
    <div>
        <!-- 模拟绑定和事件触发 -->
        <!-- <button @click="btnClick">HYinput按钮</button>
        <h2>HYinput的message: {{modelValue}}</h2> -->

        <!-- 通过input -->
        <!-- <input type="text" :value="modelValue" @input="btnClick"> -->

        <!-- 这样不对 不能绑定到props -->
        <!-- <input type="text" v-model="modelValue"> -->

       
        <input v-model="value">
    </div>
</template>

<script>
    export default {
        props: {
            modelValue: String
        },
        emits: ['update:modelValue'],
        computed: {
            value: {
                set(value) {
                    this.$emit('update:modelValue', value);
                },
                get() {
                    return this.modelValue;
                }
            }
        },
        methods: {
            // 点击之后,把值赋给了message
            // btnClick() {
            //     this.$emit('update:modelValue', '123')
            // }
            btnClick(event) {
                this.$emit('update:modelValue', event.target.value)
            }
        }
    }
</script>

<style scoped>

</style>